﻿@*
    列表视图 - 卡片模式
*@
@using NewLife;
@using NewLife.Web;
@using XCode;
@using XCode.Configuration;
@{
    var fact = ViewBag.Factory as IEntityFactory;
    var page = ViewBag.Page as Pager;
    var fields = ViewBag.Fields as FieldCollection;
    var list = Model as IEnumerable<IEntity>;
    var entities = list.ToArray();
    var i = 0;
    var columns = 3;
    var ukey = fact.Unique;
    var set = ViewBag.PageSetting as PageSetting ?? PageSetting.Global;
}

<!-- 每行3个卡片 -->
@for(int row = 0; row <= list.Count() / columns; row++)
{
    if (list.Count() == 0 || i >= page.PageSize) { break; }

    <div class="row g-5 g-sm-5">
        @for(int col = 1; col <= columns; col++)
        {
            if (i >= list.Count()) { break; }
            var entity = entities[i++];
            // 修复卡片视图在移动端设备的显示空隙问题
            var mb = col == columns || row == list.Count() / columns ? "mb-sm-5" : "";

            <div class="col-xl-@(12/columns)">
                <div id="@entity[@fact.Unique.Name]" class="card card-xl-stretch @mb">
                    @await Html.PartialAsync("_List_Card_Header", entity)

                    @await Html.PartialAsync("_List_Card_Body", entity)

                    @if (this.Has(PermissionFlags.Detail, PermissionFlags.Update, PermissionFlags.Delete))
                    {
                        @await Html.PartialAsync("_List_Card_Footer", entity)
                    }
                </div>
            </div>
        }
    </div>
}

